import React, { Component } from 'react'


import { Link, NavLink } from 'react-router-dom';
import { Route, withRouter, Redirect, Switch } from 'react-router-dom';
import Home from './Home'
import Categoty from './Categoty'
import Car from './Car';
import Mine from './Mine';
import NotFind from './NotFind';
import './Father.css';

//路由组件的3种渲染方式:
//  方式1: component
// 01: component 属性值为组件名  component={Home}
//  该方式特点: 有路由三剑客, 就可以实现路由跳转和参数获取(最最常用)
// 02: component 属性值为函数  component={(props) => <Home {...props}
// 该方式特点: 没有路由三剑客, 要想有, 则可以通过props进行属性传递

// 方式2: render
// 01: 只有函数形式  render={(props) => <Categoty {...props}></Categoty>}
//特点: 没有路由属性三剑客, 需要props 属性传递

// 方式3: children
// 01: children={<Car {...this.props}></Car>}值为组件标签,
// 特点: 没有props, 需要props属性传递
// 02: children={(props) => <Car {...props}></Car>}
// 特点: 没有props, 需要传递props 属性
// 拓展:
// 当children 属性为函数时, 前提没有Switch 组件包裹的时候, 那么无论什么路径path,
// children 属性对应的组件都会显示,这是个bug,能不能解决? 能解决
// 解决思路: 根据当前children对应的组件上match属性是否为null, 判断是都匹配. 进而
// 决定是否渲染children 属性对应的组件

class Father extends Component {
    state = {
        id: 999,
        name: '林正英',
        age: 50
    }
    render() {
        return (
            <>
                {/* 声明式导航 */}
                <div>
                    <NavLink to='/home'>首页</NavLink>
                    <NavLink to='/category'>分类</NavLink>
                    <NavLink to='/car'>购物车</NavLink>
                    <NavLink to='/mine'>我的</NavLink>
                </div>
                {/* 路由匹配规则及显示的组件 */}
                {/* <Switch> */}
                {/* <Route path='/home' component={Home}></Route> */}
                <Route path='/home' component={(props) => <Home {...props}></Home>}></Route>
                <Route path='/category' render={(props) => <Categoty {...props}></Categoty>}></Route>
                {/* <Route path='/car' children={<Car {...this.props}></Car>}></Route> */}
                <Route path='/car' children={(props) => {
                    if (props.match) {
                        // 表示不为null, 说明当前页面路径就是'/car',
                        return <Car {...props}></Car>
                    } else {
                        // 表示 为null , 则当前路径不是'/car'
                        return <></>
                    }

                }}></Route>
                <Route path='/mine' component={Mine}></Route>
                {/* </Switch> */}
            </>
        )
    }
}

export default withRouter(Father)